<template>
  <div>
    <div class="container">
      <div class="img">
        <el-card>
          <div>
            <el-row :gutter="20">
              <el-col :span="6">
                <div>
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="value2"
                    :title="title"
                  ></el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic title="男女比">
                    <template slot="formatter"> 456/2 </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    decimal-separator="."
                    :value="value1"
                    :title="title"
                  >
                    <template slot="prefix">
                      <i class="el-icon-s-flag" style="color: red"></i>
                    </template>
                    <template slot="suffix">
                      <i class="el-icon-s-flag" style="color: blue"></i>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic :value="like ? 521 : 520" title="Feedback">
                    <template slot="suffix">
                      <span @click="like = !like" class="like">
                        <i
                          class="el-icon-star-on"
                          style="color: red"
                          v-show="!!like"
                        ></i>
                        <i class="el-icon-star-off" v-show="!like"></i>
                      </span>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
      <div class="aa">
        <div>
          <el-row :gutter="20">
            <el-col :span="14">
              <div style="width: 100%; display: inline-block">
                <el-statistic :value="deadline2" time-indices title="商品降价">
                  <template slot="suffix"> 抢购即将开始 </template>
                </el-statistic>
              </div>
              <div style="width: 100%; display: inline-block; margin-top: 50px">
                <el-statistic
                  @finish="hilarity"
                  :value="deadline3"
                  time-indices
                  title="一寸光阴一寸金"
                >
                  <template slot="suffix">
                    <el-button type="primary " size="small" @click="add"
                      >add 10 second</el-button
                    >
                  </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="10">
              <el-card shadow="hover" style="width: 100%">
                <div slot="header" class="clearfix">
                  <span>文嘉《明日歌》</span>
                  <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="clickFn"
                    >暂停</el-button
                  >
                </div>
                <div style="font-size: 18px; text-align: center">
                  明日复明日
                </div>
                <div style="font-size: 18px; text-align: center">
                  明日何其多
                </div>

                <div style="font-size: 18px; text-align: center">
                  我生待明日
                </div>

                <div style="font-size: 18px; text-align: center">
                  万事成蹉跎
                </div>
                <div style="margin-top: 40px"></div>
                <el-statistic
                  ref="statistic"
                  @finish="hilarity"
                  format="HH:mm:ss"
                  :value="deadline4"
                  title="距离明日："
                  time-indices
                >
                </el-statistic>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </div>
    <div class="card">
      <el-card style="margin-top: 20px">
        <h1>权限管理</h1>
        <ul>
          <li v-add>
            <el-button type="primary">添加</el-button>
          </li>
          <li>
            <el-button type="primary">修改</el-button>
          </li>
          <li>
            <el-button type="primary">删除</el-button>
          </li>
          <li>
            <el-button type="primary">编辑</el-button>
          </li>
          <li>
            <el-button type="primary">取消</el-button>
          </li>
        </ul>
      </el-card>
      <el-card style="margin: 20px 0">
        <Citys />
      </el-card>
    </div>

    <el-card>
      <Tabs v-if="items"></Tabs>
    </el-card>
  </div>
</template>

<script>
import Citys from "./citys/index.vue";
import Tabs from "./tabs/index.vue";
export default {
  components: { Citys, Tabs },
  name: "menu-list",
  mounted() {
    this.$bus.$on("aa", this.count);
  },
  // 依赖注入
  provide() {
    return {
      shuaxin: this.shuaxin,
    };
  },
  data() {
    return {
      items: true,
      aa: "",
      like: true,
      value1: 4154.564,
      value2: 2222,
      title: "今年的增长",
      input: "Hello Element UI!",

      format: "HH小时:mm:ss:SSS",
      deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
      deadline2: Date.now() + 1000 * 60 * 60 * 8,
      deadline3: Date.now() + 1000 * 60 * 30,
      deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  methods: {
    shuaxin() {
      (this.items = false),
        this.$nextTick(() => {
          this.items = true;
        
        });
    },

    hilarity() {
      this.$notify({
        title: "提示",
        message: "时间已到，你可知寸金难买寸光阴？",
        duration: 0,
      });
    },
    clickFn() {
      this.$refs.statistic.suspend(this.stop);
      this.stop = !this.stop;
    },
    add() {
      this.deadline3 = this.deadline3 + 1000 * 10;
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  .img {
    width: 50%;
    margin-right: 20px;
  }
  .aa {
    flex: 1;
  }
}
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
ul {
  display: flex;
  li {
    margin-right: 20px;
  }
}
.nihao {
  position: absolute;
  border: 1px solid red;
  left: 0;
  font-size: 17px;
}
.nihao1 {
  position: absolute;
  border: 1px solid red;
  left: 0;
}
</style>
